import React from "react";
import { connect } from "dva";
import { Tabs, message } from "antd";
import "./index.less";
import "./Header.less";

const TabPane = Tabs.TabPane;

@connect(({ add }) => ({
  add: add
}))
class Header extends React.PureComponent {
  constructor(props) {
    super(props);
    const panes = [{ title: "Tab 0", content: {}, key: "1" }];
    this.state = {
      activeKey: panes[0].key,
      panes,
      lastActiveKey: 1
    };
  }
  componentDidMount() {
    this.setState({
      panes: this.props.add.allDataSource
    });
    //订阅
    // window.PubSub.subscribe("tabTitle", this.setTabTitle);
    window.PubSub.subscribe("tabRemove", this.remove);
  }
  onChange = activeKey => {
    let data = this.props.getFileds();
    let panes = [...this.props.add.allDataSource];
    let num = this.state.activeKey;
    let newData = {};
    panes.map((item, index) => {
      if (item.key == num) {
        item.content = data;
      }
      if (item.key == activeKey) {
        newData = item.content;
      }
    });
    this.props.reset();
    this.props.setFields(newData);
    this.setState({ activeKey });
    this.props.dispatch({ type: "add/saveAllDataSource", data: panes });
  };

  onEdit = (targetKey, action) => {
    this[action](targetKey);
  };
  //新建
  add = () => {
    let data = this.props.getFileds();
    let panes = [...this.props.add.allDataSource];
    let num = this.state.activeKey;
    panes.map((item, index) => {
      if (item.key == num) {
        item.content = data;
      }
    });
    this.props.reset();
    const activeKey = Number(this.state.lastActiveKey) + 1;
    panes.push({ title: `新建稿件 ${activeKey}`, content: {}, key: String(activeKey) });
    this.setState({ panes, activeKey: String(activeKey), lastActiveKey: activeKey });
    this.props.dispatch({ type: "add/saveAllDataSource", data: panes });
  };
  //移除
  remove = targetKey => {
    let length = this.state.panes.length;
    if (length <= 1) {
      message.info("1秒后自动关闭页面~");
      setTimeout(() => {
        window.close();
      }, 1000);
      return;
    }
    if (!targetKey) {
      var targetKey = this.state.activeKey;
    }
    let newData = {};
    let activeKey = this.state.activeKey;
    let lastIndex;
    this.state.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
    if (lastIndex >= 0 && activeKey === targetKey) {
      activeKey = panes[lastIndex].key;
      newData = panes[lastIndex].content;
    }
    this.props.reset();
    this.props.setFields(newData);
    this.setState({ panes, activeKey });
    this.props.dispatch({ type: "add/saveAllDataSource", data: panes });
  };
  /**
   * 设置标题值
   */
  setTabTitle = data => {
    let activeKey = this.state.activeKey;
    let panes = [...this.state.panes];
    panes.map(item => {
      if (item.key == activeKey) {
        item.title = data;
      }
    });
    this.props.dispatch({ type: "add/saveAllDataSource", data: panes });
  };
  render() {
    return (
      <div className="tab">
        <Tabs onChange={this.onChange} activeKey={this.state.activeKey} type="editable-card" onEdit={this.onEdit}>
          {this.state.panes.map(pane => (
            <TabPane tab={pane.title} key={pane.key}></TabPane>
          ))}
        </Tabs>
      </div>
    );
  }
}
export default Header;
